<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model">
			<view class="status_bar">

			</view>
			<view class="nav_bar flex align-center justify-between" style="position: relative;">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.i028}}
				</view>
				<view class="flex-1">
					<!-- <view class="pt-2" style="position: absolute;right:0;top: 0;">
						<view @click="$tool.navTo('/pages/index/jljl')" class="label A-Regular"
							:class="model=='light'?'labelLight':''">
							{{i18n.i029}}
						</view>
						<view @click="$tool.navTo('/pages/fwb/fwb?type=2')" class="label mt-3 A-Regular"
							:class="model=='light'?'labelLight':''">
							{{i18n.i030}}
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- banner -->
		<view class="mt-2 flex justify-center f0" style="margin-bottom: 8rpx;">
			<image style="width: 632rpx;height: 215rpx;" :src="'/static/images/guessingCompetition/1_'+model+'.png'"
				mode="aspectFill"></image>
		</view>
		<!-- 公告 -->
		<view class="notice" @click="$tool.navTo('/pages/index/myMessage')" :class="model=='light'?'noticeLight':''">
			<uni-notice-bar :fontSize="11" scrollable="true" :wrapHeight="'48'" showIcon="true"
				:color="model=='dark'?'#AAACB8':'#7f838c'" :text2="text2" /></uni-section>
		</view>
		<!-- 连胜 -->
		<view class="recordWrap mx-3 flex align-center py-2 mt-4" :class="model=='light'?'recordWrapLight':''">
			<view class="flex-1 flex flex-column align-center">
				<view class=" A-Medium" style="font-size: 24rpx;color: #7F838D;">
					{{i18n.i031}}
				</view>
				<view class="D-Bold" style="font-weight: bold;font-size: 40rpx;color: #AAACB8;margin-top: 8rpx;">
					{{ls1}}
				</view>
			</view>
			<view class="flex-1 flex flex-column align-center">
				<view class=" A-Medium" style="font-size: 24rpx;color: #7F838D;">
					{{i18n.i032}}
				</view>
				<view class="D-Bold" style="font-weight: bold;font-size: 40rpx;color: #AAACB8;margin-top: 8rpx;">
					{{ls2}}
				</view>
			</view>
			<view class="flex-1 flex flex-column align-center">
				<view class=" A-Medium" style="font-size: 24rpx;color: #7F838D;">
					{{i18n.i033}}
				</view>
				<view class="D-Bold" style="font-weight: bold;font-size: 40rpx;color: #AAACB8;margin-top: 8rpx;">
					{{ls3}}
				</view>
			</view>
		</view>
		<!-- 竞猜记录、活动规则 -->
		<view class="my-2 flex align-center justify-between">
			<view @click="$tool.navTo('/pages/index/jljl')" style="padding-left: 16rpx;padding-right: 24rpx;border-radius: 0rpx 24rpx 24rpx 0rpx;border-left: unset;" class="label A-Regular"
				:class="model=='light'?'labelLight':''">
				竞猜记录
			</view>
			<view @click="$tool.navTo('/pages/fwb/fwb?type=2')" class="label A-Regular"
				:class="model=='light'?'labelLight':''">
				{{i18n.i030}}
			</view>
		</view>
		<!-- <view class="victoryNum mt-2 A-Medium mx-auto" :class="model=='light'?'victoryNumLight':''">
			<view class="mt-4">
				<view class="title text-alignC">
					{{i18n.i031}}
				</view>
				<view class="num D-Bold text-alignC">
					{{ls1}}
				</view>
			</view>
			<view class="flex align-center" style="margin-top: 50rpx;">
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="title1 text-alignC">
						{{i18n.i032}}
					</view>
					<view class="num1 D-Bold text-alignC">
						{{ls2}}
					</view>
				</view>
				<view class="flex-1" style="flex-shrink: 0;">
					<view class="title1 text-alignC">
						{{i18n.i033}}
					</view>
					<view class="num1 D-Bold text-alignC">
						{{ls3}}
					</view>
				</view>
			</view>
		</view> -->
		<!-- 活动 -->
		<view class="guess A-Medium m-3 p-3" style="margin-top: 0;" :class="model=='light'?'guessLight':''">
			<view class="flex align-center">
				<view class="flex align-center flex-1">
					<view class="f0">
						<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/index/16_'+model+'.png'"
							mode=""></image>
					</view>
					<view class="guessTitle2">
						{{i18n.i018}}：
					</view>
					<view v-if="btcPrice"
						:class="(btcPrice.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						class="mx-1 A-Regular">
						${{(btcPrice.price/1).toFixed(2)}}
					</view>
					<view v-if="btcPrice"
						:class="(btcPrice.priceChangePercent24h.indexOf('-')!=-1)?'valueItem2':'valueItem3'"
						class="mx-1 A-Regular">
						{{(btcPrice.priceChangePercent24h/1).toFixed(2)}}%
					</view>
				</view>
			</view>
			<view v-if="isCanguess" class="flex align-center">
				<view class="f0">
					<image style="width: 40rpx;height: 40rpx;" :src="'/static/images/index/17_'+model+'.png'" mode="">
					</image>
				</view>
				<view class="guessTitle2 flex align-center">
					{{guessingStart ? (guessingEnd ? i18n.i022 : i18n.i020) : i18n.i044}}：
					<view class="times A-Medium">
						{{hours}}
					</view>
					<view class="times A-Medium mx-1">
						{{minutes}}
					</view>
					<view class="times A-Medium">
						{{seconds}}
					</view>
				</view>
			</view>
			<view class="mt-3 mb-1 flex align-center">
				<view class="A-Regular" :class="{ 'valueItem2': guessingStart, 'valueItem1Light' : !guessingStart }" style="font-size: 24rpx;">
					{{ guessingStart ? rate : '0%'}}
				</view>
				<view class="mx-2 flex-1 flex align-center justify-end"
					style="background: #53D290;border-radius: 100rpx;height: 20rpx;overflow: hidden;flex-shrink: 0;">
					<view v-if="guessingStart" class="" style="position: relative;background: #D22540;height: 20rpx;border-radius: 0 10rpx 10rpx 0;"
						:style="'width:'+rate2">
						<image v-if="rate != '0%' && rate2 != '100%'" style="height: 40rpx;position: absolute;top: 0rpx;left: -5rpx;transform: scaleX(-1);" src="/static/images/pross.png"
							mode="heightFix"></image>
					</view>
					<view v-if="!guessingStart || (rate == '0%' && rate2 == '0%')" class="" style="background: #f1f1f1;height: 20rpx;border-radius: 0 10rpx 10rpx 0;"
						:style="'width: 100%'">
							
					</view>
				</view>
				<view class="A-Regular" :class="{ 'valueItem3': guessingStart, 'valueItem1Light' : !guessingStart }" style="font-size: 24rpx;">
					{{ guessingStart ? rate2 : '0%' }}
				</view>
			</view>
			<template v-if="!isCanguess">
				<view class="flex guessTitle2 align-center justify-center"
					style="margin-top: 22rpx;margin-bottom: 6rpx;">
					{{i18n.i021}}：<view class="valueItem3" style="font-size: 40rpx;">
						{{guessResult=='Bullish'?i18n.i039:i18n.i040}}
					</view>
				</view>
				<view class="flex align-center justify-center">
					<view class="guessTitle2 flex align-center">
						{{i18n.i022}}：
						<view class="times A-Medium">
							{{hours}}
						</view>
						<view class="times A-Medium mx-1">
							{{minutes}}
						</view>
						<view class="times A-Medium">
							{{seconds}}
						</view>
					</view>
				</view>
			</template>
			<view class="guessTitle2 text-alignC" style="font-size: 20rpx;margin-top: 16rpx;margin-bottom: 24rpx;">
				{{i18n.i023}}
			</view>
			<view v-if="isCanguess&&guessingStart" class="flex align-center justify-center">
				<view @click="getActivityDetailAdd(1)" class="mr-3 flex align-center justify-center kanz"
					:class="model=='light'?'kanzLight':''">
					<view class="">
						{{i18n.i024}}
					</view>
					<view class="f0">
						<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/18_'+model+'.png'"
							mode="">
						</image>
					</view>
				</view>
				<view @click="getActivityDetailAdd(2)" class="kand flex align-center justify-center"
					:class="model=='light'?'kandLight':''">
					<view class="">
						{{i18n.i025}}
					</view>
					<view class="f0">
						<image style="width: 20rpx;height: 20rpx;" :src="'/static/images/index/19_'+model+'.png'"
							mode="">
						</image>
					</view>
				</view>
			</view>
		</view>
		<!-- 活动日历 -->
		<view class="calendar mx-auto" :class="model=='light'?'calendarLight':''">
			<view class="calendarBg">
				<view class="flex pt-3 pb-2 align-center justify-center">
					<view class="f0">
						<image style="width: 195rpx;" :src="'/static/images/guessingCompetition/4_'+model+'.png'"
							mode="widthFix"></image>
					</view>
					<view class="calendarTitle A-Medium">
						{{i18n.i034}}
					</view>
					<view class="f0">
						<image style="width: 195rpx;" :src="'/static/images/guessingCompetition/5_'+model+'.png'"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="flex align-center justify-center">
					<view class="flex align-center mr-6">
						<!-- <view class="smallCircle1" style="margin-right: 8rpx;">

						</view> -->
						<view class="f0" style="margin-right: 8rpx;">
							<image style="height: 18rpx;" src="/static/images/duiimg.png" mode="heightFix"></image>
						</view>
						<view class="calendarDesc A-Medium">
							{{i18n.i035}}
						</view>
					</view>
					<view class="flex align-center mr-6">
						<!-- <view class="smallCircle2" style="margin-right: 8rpx;">

						</view> -->
						<view class="f0" style="margin-right: 8rpx;">
							<image style="height: 18rpx;" src="/static/images/cuoimg.png" mode="heightFix"></image>
						</view>
						<view class="calendarDesc A-Medium">
							{{i18n.i036}}
						</view>
					</view>
					<view class="flex align-center mr-6">
						<view class="smallCircle3" style="margin-right: 8rpx;">

						</view>
						<view class="calendarDesc A-Medium">
							{{i18n.i037}}
						</view>
					</view>
					<view class="flex align-center mr-6">
						<view class="smallCircle4" style="margin-right: 8rpx;">

						</view>
						<view class="calendarDesc A-Medium">
							{{i18n.i038}}
						</view>
					</view>
				</view>
			</view>
			<view class="calendarBot">
				<view class="flex align-center pb-2 justify-center" style="padding-top: 26rpx;">
					<view @click="upMonth" class="f0">
						<image style="width: 60rpx;" :src="'/static/images/guessingCompetition/6_'+model+'.png'"
							mode="widthFix"></image>
					</view>
					<view class="calendarBotTitle A-Medium">
						{{monthArr[month]}}
					</view>
					<view @click="downMonth" class="f0">
						<image style="width: 60rpx;" :src="'/static/images/guessingCompetition/7_'+model+'.png'"
							mode="widthFix"></image>
					</view>
				</view>
				<view class="week ml-36 flex align-center justify-center">
					<view class="item mr-36 flex align-center justify-center">
						Sun
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Mon
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Tues
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Wed
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Thu
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Fri
					</view>
					<view class="item mr-36 flex align-center justify-center">
						Sat
					</view>
				</view>
				<view class="week ml-36 flex flex-wrap align-center justify-center">
					<view v-for="(item,index) in dayWeek" class="mt-2 mr-36 item flex align-center justify-center">

					</view>
					<view v-for="(item,index) in monthDays" class="mr-36 mt-3 item flex align-center justify-center"
						style="flex-shrink: 0;position: relative;" :class="'smallCircle'+isGuess(item)">
						{{item}}
						<view v-if="isGuess2(item)!==0" class="f0 flex justify-center" style="position: absolute;left: 0;right: 0;margin: auto;bottom: -24rpx;">
							<image style="height: 16rpx;" v-if="isGuess2(item)==1" src="/static/images/duiimg.png" mode="heightFix"></image>
							<image style="height: 16rpx;" v-if="isGuess2(item)==2" src="/static/images/cuoimg.png" mode="heightFix"></image>
						</view>
					</view>
					<template v-if="(7-(monthDays+dayWeek)%7)!=7">
						<view v-for="(item,index) in (7-(monthDays+dayWeek)%7)"
							class="mt-2 mr-36 item flex align-center justify-center">

						</view>
					</template>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		activityDetailAdd,
		activityDetailList,
		activityDetailCalendarList,
		activityDetailQueryRate,
		activityDetailQueryResult,
		activityStatisticsQuery,
		activityRewardNoticeList,
		activityRuleBTC_USDT_PRICE,
		getActivityTime
	} from '@/core/api/index.js';
	var _this;
	export default {
		data() {
			return {
				monthArr: {
					'1': 'Jan',
					'2': 'Feb',
					'3': 'Mar',
					'4': 'Apr',
					'5': 'May',
					'6': 'Jun',
					'7': 'Jul',
					'8': 'Aug',
					'9': 'Sept',
					'10': 'Oct',
					'11': 'Nov',
					'12': 'Dec'
				},
				year: '',
				month: '',
				monthDays: 0, //当月多少天
				dayWeek: 0, //当月第一天是周几 0-周日
				isCanguess: true,
				guessResult: '',
				rate: '0%',
				rate2: '0%',
				guessResultList: [], //当月结果
				hours: '00',
				minutes: '00',
				seconds: '00',
				timer: null,
				ls1: 0,
				ls2: 0,
				ls3: 0,
				// 公告
				text2: [],
				// btcPrice:'',
				isSubmit:false,
				guessingStart: false,
				guessingEnd: false
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		
		computed: {
			i18n() {
				return this.$t('index');
			},
			model() {
				return this.$store.state.config.model;
				// return 'dark'
			},
			btcPrice() {
				return this.$store.state.config.btcPrice;
			},
		},
		filters: {

		},
		onLoad() {
			// 当前BTC指数价
			// activityRuleBTC_USDT_PRICE({}).then(res=>{
			// 	this.btcPrice = res.result;
			// })
			_this = this;
			const now = new Date();
			this.year = now.getFullYear();
			this.month = now.getMonth() + 1;
			this.monthDays = this.getDaysInMonth(this.year, this.month - 1);
			this.dayWeek = this.getFirstDayOfWeekStr(this.year, this.month - 1);
			this.getActivityDetailQueryResult();
			this.getActivityDetailQueryRate();
			this.getActivityDetailList();
			getActivityTime().then(res=>{
				console.log(res,'cs---------getRemainingTimeToday');
				let list = res.result;
				let start_time;
				let end_time;
				for(let i=0;i<list.length;i++){
					if(list[i].value=='end_time'){
						end_time = list[i].text;
					}
					if(list[i].value=='start_time'){
						start_time = list[i].text;
						// start_time = '11:51:00';
					}
				}
				this.timer2 = setInterval(res => {
					this.getRemainingTimeToday(start_time,end_time);
				}, 1000)
			})
			activityStatisticsQuery({
				mobileUserId: uni.getStorageSync('mobileUserId'),
			}).then(res => {
				console.log(res, 'cs-activityStatisticsQuery');
				let obj = res.result;
				this.ls1 = obj.currentWinDay;
				this.ls2 = obj.highestWinDay;
				this.ls3 = obj.netHighestWinDay;
			})
			activityRewardNoticeList({
				pageNo: 1,
				pageSize: 10,
			}).then(res => {
				console.log(res.result.records[0], 'cs-activityRewardNoticeList');
				this.text2.push(res.result.records[0])
				// this.text2 = res.result.records
				// let obj = res.result.records[0];
				// this.text2 = {
				// 	name: obj.mobileUserId,
				// 	day: obj.highestWinDay,
				// 	goods: obj.activityReward
				// };
			})
		},
		methods: {
			// 查看你猜结果
			getActivityDetailQueryResult() {
				activityDetailQueryResult({
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					this.guessResult = res.result.guessResult;
					if (this.guessResult) {
						this.isCanguess = false;
					}
					this.isSubmit = false;
				}).catch(err=>{
					this.isSubmit = false;
				})
			},
			// 看涨或看跌比例
			getActivityDetailQueryRate() {
				activityDetailQueryRate({}).then(res => {
					console.log(res, 'cs-activityDetailQueryRate');
					let list = res.result;
					for (let i = 0; i < list.length; i++) {
						if (list[i].guessResult == 'Bullish') {
							this.rate2 = list[i].rate;
						} else {
							this.rate = list[i].rate;
						}
					}
				})
			},
			// 参与活动
			getActivityDetailAdd(e) {
				if(this.isSubmit){
					return;
				}else{
					this.isSubmit = true;
				}
				activityDetailAdd({
					guessResult: e == 1 ? 'Bullish' : 'Bearish',
					mobileUserId: uni.getStorageSync('mobileUserId')
				}).then(res => {
					console.log(res, 'cs-getActivityDetailAdd');
					this.getActivityDetailQueryResult();
					this.getActivityDetailQueryRate();
					this.getActivityDetailList();
				}).catch(err=>{
					this.isSubmit = false;
				})
			},
			upMonth() {
				if (this.month > 1) {
					this.month--;
				} else {
					this.month = 12;
					this.year--;
				}
				this.monthDays = this.getDaysInMonth(this.year, this.month - 1);
				this.dayWeek = this.getFirstDayOfWeekStr(this.year, this.month - 1);
				this.getActivityDetailList();
			},
			downMonth() {
				if (this.month < 12) {
					this.month++;
				} else {
					this.month = 1;
					this.year++;
				}
				this.monthDays = this.getDaysInMonth(this.year, this.month - 1);
				this.dayWeek = this.getFirstDayOfWeekStr(this.year, this.month - 1);
				this.getActivityDetailList();
			},
			// 客户参与活动列表
			getActivityDetailList() {
				activityDetailCalendarList({
					activityDateMonth: (this.year + '-') + (this.month > 9 ? this.month : '0' + this.month),
					pageNo: 1,
					pageSize: 40,
					mobileUserId: uni.getStorageSync('mobileUserId'),
				}).then(res => {
					console.log(res, 'cs-activityDetailList');
					let list = [];
					for (let i = 0; i < res.result.records.length; i++) {
						let obj = {
							day: res.result.records[i].activityDate.split('-')[2],
							guessResult: res.result.records[i].guessResult,
							lotteryResult: res.result.records[i].lotteryResult
						}
						list.push(obj);
					}
					this.guessResultList = list;
				})
			},
			getDaysInMonth(year, month) {
				// 在JavaScript中，月份是从0开始的，所以1月是0，2月是1，以此类推。
				// 因此，我们需要将传入的月份减去1。
				if (month >= 0 && month <= 11) {
					month++; // 调整月份以符合常规认知（1月为1，2月为2等）
				}
				// this.$tool.showToast(new Date(year, month, 0).getDate().toString());
				// 创建一个日期对象，设置为下一个月的第一天，然后减去一天，得到上个月最后一天
				return new Date(year, month, 0).getDate();
			},
			getFirstDayOfWeekStr(year, month) {
				const firstDay = new Date(year, month, 1);
				return firstDay.getDay();
			},
			getRemainingTimeToday(start_time,end_time) {
				let now = new Date();
				let startOfDay = this.getDateByTime(now, start_time);
				let endOfDay = this.getDateByTime(now, end_time);
				let remainingMilliseconds;
				let remainingSeconds;
				let remainingMinutes;
				let remainingHours;
				if(startOfDay - now > 0){
					remainingMilliseconds = startOfDay-now;
					remainingSeconds = Math.floor(remainingMilliseconds / 1000);
					remainingMinutes = Math.floor(remainingSeconds / 60);
					remainingHours = Math.floor(remainingMinutes / 60);
					remainingSeconds %= 60;
					remainingMinutes %= 60;
					remainingHours %= 24;
					remainingHours<0?remainingHours=0:'';
					remainingMinutes<0?remainingMinutes=0:'';
					remainingSeconds<0?remainingSeconds=0:'';
					this.hours = remainingHours > 9 ? remainingHours : '0' + remainingHours;
					this.minutes = remainingMinutes > 9 ? remainingMinutes : '0' + remainingMinutes;
					this.seconds = remainingSeconds > 9 ? remainingSeconds : '0' + remainingSeconds;
					this.guessingStart = false;
					this.guessingEnd = false;
					clearInterval(this.timer);
					this.timer = null;
					this.timer = setInterval(res => {
						this.getRemainingTimeToday(start_time,end_time);
					}, 1000)
					return;
				} else if (endOfDay - now > 0 && this.isCanguess){
					//已开始
					this.guessingStart = true;
					remainingMilliseconds = endOfDay - now;
					remainingSeconds = Math.floor(remainingMilliseconds / 1000);
					remainingMinutes = Math.floor(remainingSeconds / 60);
					remainingHours = Math.floor(remainingMinutes / 60);
					remainingSeconds %= 60;
					remainingMinutes %= 60;
					remainingHours %= 24;
					remainingHours<0?remainingHours=0:'';
					remainingMinutes<0?remainingMinutes=0:'';
					remainingSeconds<0?remainingSeconds=0:'';
					this.hours = remainingHours > 9 ? remainingHours : '0' + remainingHours;
					this.minutes = remainingMinutes > 9 ? remainingMinutes : '0' + remainingMinutes;
					this.seconds = remainingSeconds > 9 ? remainingSeconds : '0' + remainingSeconds;
					if (this.hours == '00' && this.minutes == '00' && this.seconds == '00') {
						this.guessingEnd = true;
						clearInterval(this.timer);
						this.timer = null;
						this.getActivityDetailQueryResult();
						this.getActivityDetailQueryRate();
						this.timer = setInterval(res => {
							this.getRemainingTimeToday(start_time,end_time);
						}, 1000)
					}
				} else {
					//已开始
					this.guessingStart = true;
					this.guessingEnd = true;
					remainingMilliseconds = new Date(now.getFullYear(),
														now.getMonth(), 
														now.getDate(), 
														'23', 
														'59', 
														'59', 
														999) - now;
					remainingSeconds = Math.floor(remainingMilliseconds / 1000);
					remainingMinutes = Math.floor(remainingSeconds / 60);
					remainingHours = Math.floor(remainingMinutes / 60);
					remainingSeconds %= 60;
					remainingMinutes %= 60;
					remainingHours %= 24;
					remainingHours<0?remainingHours=0:'';
					remainingMinutes<0?remainingMinutes=0:'';
					remainingSeconds<0?remainingSeconds=0:'';
					this.hours = remainingHours > 9 ? remainingHours : '0' + remainingHours;
					this.minutes = remainingMinutes > 9 ? remainingMinutes : '0' + remainingMinutes;
					this.seconds = remainingSeconds > 9 ? remainingSeconds : '0' + remainingSeconds;
					if (this.hours == '00' && this.minutes == '00' && this.seconds == '00') {
						clearInterval(this.timer);
						this.timer = null;
						this.getActivityDetailQueryResult();
						this.getActivityDetailQueryRate();
						this.timer = setInterval(res => {
							this.getRemainingTimeToday(start_time,end_time);
						}, 1000)
					}
				}
			},
			// 涨跌
			isGuess(e) {
				e = e > 9 ? e : '0' + e;
				let a = 0; //0 未参加 1 对 2 错 3 涨 4 跌 
				for (let i = 0; i < _this.guessResultList.length; i++) {
					if (_this.guessResultList[i].day == e) {
						if (_this.guessResultList[i].guessResult == 'Bullish') {
							a = 3;
						} else {
							a = 4;
						}
						// if (_this.guessResultList[i].lotteryResult) {
						// 	if (_this.guessResultList[i].lotteryResult == '猜对') {
						// 		a = 1;
						// 	} else {
						// 		a = 2;
						// 	}
						// } else {
						// 	if (_this.guessResultList[i].guessResult == 'Bullish') {
						// 		a = 3;
						// 	} else {
						// 		a = 4;
						// 	}
						// }
					}
				}
				return a;
			},
			// 对错
			isGuess2(e) {
				e = e > 9 ? e : '0' + e;
				let a = 0; //0 未参加 1 对 2 错 3 涨 4 跌 
				for (let i = 0; i < _this.guessResultList.length; i++) {
					if (_this.guessResultList[i].day == e) {
						if (_this.guessResultList[i].lotteryResult) {
							if (_this.guessResultList[i].lotteryResult == '猜对') {
								a = 1;
							} else {
								a = 2;
							}
						} 
						// else {
						// 	if (_this.guessResultList[i].guessResult == 'Bullish') {
						// 		a = 3;
						// 	} else {
						// 		a = 4;
						// 	}
						// }
					}
				}
				return a;
			},
			getDateByTime(date, time){
				return new Date(date.getFullYear(),
					date.getMonth(), 
					date.getDate(), 
					time.split(':')[0], 
					time.split(':')[1], 
					time.split(':')[2], 
					999);
			}
		}
	}
</script>

<style scoped lang="scss">
	.kanz {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #F7F7F7;
		border: 2rpx solid #D22540;
		border-radius: 36rpx;

		image {
			margin-left: 8rpx;
		}
	}

	.kanzLight {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #D22540;
		background: rgba(210, 37, 64, 0.1);
		border: 2rpx solid #D22540;
		border-radius: 36rpx;
	}

	.kand {
		padding: 8rpx 28rpx;
		font-size: 24rpx;
		color: #F7F7F7;
		border: 2rpx solid #53D290;
		border-radius: 36rpx;

		image {
			margin-left: 8rpx;
		}
	}

	.kandLight {
		padding: 8rpx 28rpx;
		background: rgba(83, 210, 144, 0.1);
		border-radius: 36rpx;
		border: 2rpx solid #53D290;
		font-size: 24rpx;
		color: #53D290;
	}

	.mr-36 {
		margin-right: 36rpx;
	}

	.ml-36 {
		margin-left: 36rpx;
	}

	.valueItem2 {
		font-size: 24rpx;
		color: #53D290;
	}

	.valueItem3 {
		font-size: 24rpx;
		color: #D22540;
	}
	
	.valueItem1Light {
		color: #7F838D;
	}

	// 活动
	.guess {
		background: #16181C;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		padding-bottom: 36rpx;

		.guessTitle {
			font-size: 32rpx;
			color: #82DA4C;
		}

		.guessTitle2 {
			font-size: 24rpx;
			color: #7F838D;

			.times {
				width: 36rpx;
				height: 32rpx;
				background: #1F2128;
				border-radius: 4rpx;
				font-size: 20rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 32rpx;
			}
		}
	}

	.guessLight {
		background: #FFFFFF;
		border: none;

		.guessTitle2 {
			color: #47474A;

			.times {
				background: #0E0F11;
			}
		}
	}

	// 日历
	.calendar {
		position: relative;
		width: 690rpx;
		padding-top: 28rpx;
		padding-bottom: 38rpx;
		// height: 592rpx;
		background: #1F2128;
		border-radius: 30rpx;
		border: 2rpx solid #1F2128;
		margin-top: 208rpx;

		.calendarBg {
			width: 690rpx;
			height: 190rpx;
			position: absolute;
			top: -178rpx;
			left: 0;
			background: url(/static/images/guessingCompetition/3_dark.png);
			background-repeat: no-repeat;
			background-size: 690rpx 190rpx;

			.calendarTitle {
				font-size: 32rpx;
				color: #F7F7F7;
			}

			.calendarDesc {
				font-size: 20rpx;
				color: #7F838D;
			}
		}

		.calendarBot {
			.calendarBotTitle {
				margin: 0 126rpx;
				font-size: 28rpx;
				color: #AAACB8;

				.num {
					font-size: 56rpx;
				}
			}

			.week {
				.item {
					width: 56rpx;
					height: 56rpx;
					font-size: 28rpx;
					color: #AAACB8;
					white-space: nowrap !important;
				}
			}
		}
	}

	.calendarLight {
		background: #fff;
		border: none;

		.calendarBg {
			width: 690rpx;
			height: 190rpx;
			position: absolute;
			top: -178rpx;
			left: 0;
			background: url(/static/images/guessingCompetition/3_light.png);
			background-repeat: no-repeat;
			background-size: 690rpx 190rpx;

			.calendarTitle {
				font-size: 32rpx;
				color: #0E0F11;
			}
		}

		.calendarBot {
			.calendarBotTitle {
				margin: 0 126rpx;
				font-size: 28rpx;
				color: #7F838D;

				.num {
					font-size: 56rpx;
				}
			}

			.week {
				.item {
					width: 56rpx;
					height: 56rpx;
					font-size: 28rpx;
					color: #47474A;

				}
			}
		}
	}

	// 公告
	.notice {
		margin: 0 auto;
		width: 606rpx;
		height: 48rpx;
		background: rgba(31, 33, 40, .4);
		border-radius: 54rpx;
		margin-top: 26rpx;
		overflow: hidden;
	}

	.noticeLight {
		background: rgba(255, 255, 255, 0.3);
	}

	.label {
		padding: 8rpx 0;
		padding-left: 24rpx;
		padding-right: 16rpx;
		background: #1F2128;
		border-radius: 24rpx 0rpx 0rpx 24rpx;
		border: 2rpx solid rgba(247, 247, 247, 0.3);
		font-size: 22rpx;
		color: #F7F7F7;
	}

	.labelLight {
		color: #0E0F11;
		background: unset;
		border: 2rpx solid rgba(14, 15, 17, 0.3);
	}

	.victoryNum {
		width: 690rpx;
		min-height: 370rpx;
		background: url(/static/images/guessingCompetition/2_dark.png);
		background-repeat: no-repeat;
		background-size: 690rpx 370rpx;
		overflow: hidden;

		.title {
			font-size: 28rpx;
			color: #AAACB8;
		}

		.num {
			margin-top: 16rpx;
			font-weight: bold;
			font-size: 68rpx;
			color: #F7F7F7;
		}

		.title1 {
			font-size: 24rpx;
			color: #7F838D;
		}

		.num1 {
			margin-top: 8rpx;
			font-weight: bold;
			font-size: 48rpx;
			color: #AAACB8;
		}
	}

	.victoryNumLight {
		width: 690rpx;
		min-height: 370rpx;
		background: url(/static/images/guessingCompetition/2_light.png);
		background-repeat: no-repeat;
		background-size: 690rpx 370rpx;
		overflow: hidden;

		.title {
			color: #7F838D;
		}

		.num {
			color: #0E0F11;
		}

		.title1 {
			color: #7F838D;
		}

		.num1 {
			color: #0E0F11;
		}
	}

	.smallCircle1 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		border: 2rpx solid #5951BA;
	}

	.smallCircle2 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		// border: 2rpx solid #7F838D;
		border: 2rpx solid blue;
	}

	.smallCircle3 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #D22540;
		border: 2rpx solid #D22540;
	}

	.smallCircle4 {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #53D290;
		border: 2rpx solid #53D290;
	}

	.circleBig {
		width: 56rpx;
		height: 56rpx;
	}
</style>